<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定位练习</title>
    <p>计科2412尤佳清28</p>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .box{
            position: absolute; 
            left: 50px;
            top: 50px;
        }
        /* 若改为相对定位：.box不会脱离文档流，相对于自身原有位置偏移（left/top=50px），仍占据原布局空间，其他div位置不变 */
        /* 绝对定位vs相对定位区别：
           1. 参考系：绝对定位参考最近已定位的父元素（无则参考视口）；相对定位参考自身原有位置
           2. 文档流：绝对定位脱离文档流；相对定位保留文档流位置
        */
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div class="box">3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>